import React, { FC } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div`
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #efefef;
  background-color: #fff;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .btn {
    font-size: 12px;
    min-width: 80px;
  }

  .amt {
    color: red;
    font-weight: bold;
  }
`

type PropsType = {
  isFull: boolean
  amount: number
  total: number
  onFullChange: (state: boolean) => void
}

const Footer: FC<PropsType> = (props) => {
  const fullCheckHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onFullChange(e.target.checked)
  }

  return (
    <Wrapper>
      {/* 全选 */}
      <div className="form-check form-check-inline">
        <input className="form-check-input" type="checkbox" id="fullcheck" checked={props.isFull} onChange={fullCheckHandler} />
        <label className="form-check-label" htmlFor="fullcheck">
          全选
        </label>
      </div>

      {/* 总价 */}
      <div>
        总价：<span className="amt">￥{props.amount.toFixed(2)}</span>
      </div>

      {/* 结算按钮 */}
      <button className="btn btn-primary">结算({props.total})</button>
    </Wrapper>
  )
}

export default Footer
